<script setup>

import {ref, onMounted, getCurrentInstance, reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";



const tableData = ref([])
const {proxy} =getCurrentInstance()
const tablaLabel=reactive([
  {
    prop: "name",
    label: '姓名'
  },
  {
    prop: "addr",
    label: '地址',
    width: "230px"
  },
  {
    prop: "birth",
    label: '生日'
  },
  {
    prop: "sex",
    label: '性别',
  },
  {
    prop: "age",
    label: '年龄'
  },
])
const searchForm=reactive({
    keyWord: ''
})

const config=reactive({
  name: '',
  page: 1
})
const  getUserData= async ()=>{
  let userList = await  proxy.$api.getUserData(config);
  console.log(userList)
  tableData.value=userList.list.map(item=>({
    ...item,
    sex: item.sex===1?'男':'女'
  }))
  config.total=userList.count
}

const handleSearch=()=>{
  config.name=searchForm.keyWord
getUserData()
}

const handleChange=(page)=>{
    config.page=page
  getUserData()
}


const deleteUser=(item)=>{
  ElMessageBox.confirm("是否确定删除？").then(()=>{
    proxy.$api.delUser({id: item.id})
    ElMessage.success("删除成功")
    getUserData()
  })

  console.log(item)
}
onMounted(()=>{
  getUserData()
})

</script>

<template>
  <div class="user-header">
    <el-button type="primary">新增</el-button>
    <el-form :inline="true" :model="searchForm">
      <el-form-item  label="请输入" >
      <el-input placeholder="请输入用户名" v-model="searchForm.keyWord"></el-input>
    </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="table">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
          v-for="item in tablaLabel" fixed
          :prop="item.prop"
          :key="item.prop"
          :label="item.label"
          :width="item.width ?item.widtd:123" />
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #="scope">
          <el-button  type="primary" size="small" >
            编辑
          </el-button>
          <el-button  type="danger" size="small" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
          layout="prev, pager, next" :total="config.total"
      @current-change="handleChange"/>
    </div>
  </div>
</template>

<style scoped lang="less">
    .user-header{
      display: flex;
      justify-content: space-between;
    }
    .table{
      position: relative;
      height: 520px;
      width: 100%;
      .page{
        position: absolute;
        right: 100px;
      }
    }
</style>
